/* eslint-disable @next/next/no-img-element */
import React, { useEffect } from 'react'
import NoSsr from '@/components/NoSsr'
import { useSafeState } from 'ahooks'
import DefaultFootballMatchImage from '@/assets/default_football_match_image.png';
import DefaultBasketballMatchImage from '@/assets/default_football_match_image.png';
import NoImg from '@/assets/noimg.png'
const Image = ({ className, src = '', type, ...props }) => {
  const defaultImg = {
    1: DefaultFootballMatchImage,//足球对标
    2: DefaultBasketballMatchImage, //篮球对标
    3: NoImg,//无内容
  }
  const defaultSrc = Reflect.get(defaultImg, type);
  const [imageSrc, setImageSrc] = useSafeState(src)
  const errorImg = (e) => {
    setImageSrc(defaultSrc?.src);
  }
  useEffect(() => {
    if (src && src !== '') return setImageSrc(src)
    errorImg()
  }, [src])

  return (
    <NoSsr onSSR={<img className={className} src={src} alt={props?.alt} />}>
      <img onError={errorImg} className={className} src={imageSrc} alt={props?.alt} {...props} loading="lazy" />
    </NoSsr>
  )
}

export default Image
